/*
*@author: liming
*@review: wangjia
*@date:   20181216
*@description：设置一个时间周期（5min～60min），前端用此时间定时get服务器的API，
*              获取边界服务器或者六合一接口服务器的连接状态。
*              本页面进行此时间周期设置。定时任务在headbar内部。
*              JAVA后端应为一个ping或url检测方法，前端调用api直接返回“后台实时”url通信检测结果。
*@api&param:   api： /get6in1InterfaceCheckIntervalTime 获取保存的时间间隔，（系统管理角色）。
               param: null
*/

<template>
    <div class="sys-page">
        <app-title :title="title"  style="display:inline;"></app-title>
        <el-button type="success" @click="refresh()" round style="float:right; margin-top:10px;" icon="el-icon-refresh">刷新</el-button>
        <!-- <app-notes>...</app-notes> -->

            <el-table v-loading="loading" border :data="tableData.body" :row-class-name="tableRowClassName">
                <el-table-column prop="content" label="有效期(分钟)" align="center"></el-table-column>
                <el-table-column label="修改" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="edit">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog style=" text-align:center " :title="dialogTitle" :visible.sync="editTableShow" width='50%' :fullscreen='false'>
                <el-form  :rules="validateRules">
                    <el-row>
                        <el-col :span="6" :offset="6"><el-form-item prop="selectValid" label="检测周期:">                  
                        <el-col :span="10">
                            <el-input v-model="selectVal" placeholder="" ref="selectValid" size="small"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-button @click.native.prevent="ok">确定</el-button>
                    </el-col>
                    </el-row>
                        
                </el-form>
                
            </el-dialog>
    </div>

</template>
<style scoped>
  .el-table .warning-row {
    background: #F08080;
  }
 .sys-page >>> .el-input__inner{
      text-align: center;
  }

   .sys-page >>> .el-form-item__error{
       position: absolute;
       top: 100%;
       left: 10%!important;
   }

  .el-table .success-row {
    background:#f0f9eb;
  }
</style>
<script>
export default {
    name: 'sessiontimepolicy',
    inject: ['reload'],
    data(){
        var validNumber= (rule, val, callback) => {
                console.log("in invalidNum "+val)
                var value = this.selectVal
                var pattern = /^([5-9])$|^((1|2|3|4|5)[0-9])$|^60$/
                if(value === ''){
                    this.okEnable = true;
                    callback(new Error("请输入间隔时间"))
                }else if(pattern.test(value) == false){
                    this.okEnable = true;
                    callback(new Error("请输入5-60之间的数字"))
                }else {
                    this.okEnable = false;
                    callback()
                }
        }
        return {
            title: '接口服务器检测设置',
            dialogTitle:"后台自动检测周期设置(分钟)",
            failcnt:1,
            loading: false,
            editTableShow: false,
            selectVal:1,
            tableData:{
                body:[{content: 5}],
                head:[],
                loading:true
            },
            errorMsg:"您的信息有误，请联系管理员修改",
            issafe:true,
            validateRules:{
                selectValid:[{ validator: validNumber, trigger: 'change', required: true, message:"请输入5-60之间的数字"}]
            },
        }
    },    
    mounted(){
        this.query()
    },
    methods:{
        refresh(){
            this.query()
        },
        ok(){
            this.$axios({
                url: '',
                type: 'post',
                data: {content:this.selectVal}
            }).then(res => {
                console.log(res.data)
            }).catch(err => {
                this.$message.error(`获取数据失败，失败码：${err.response.status}`)
            })
        },
        edit(){
            this.selectVal = this.tableData.body[0].content
            this.editTableShow = true
        },
        tableRowClassName({row, rowIndex}) {
          if(this.reliable === false){
            return 'warning-row';
          }else{
              return 'success-row'
          }
        },
        //缺少一种点进去链接，就发请求的listener
        query(){
            this.$axios({
                url: '/getBoundaryCheckIntervalTime',
                method: 'get',
            }).then(res => {
                this.tableData.body[0].content = (res.data[0].intervalTime)
            }).catch(err => {
                console.warn(`获取数据失败。${err}`)
            })
        }
    }
}
</script>

